import { createRouter, createWebHistory } from "vue-router";
import App from "../App.vue";
import PagePlay from "../view/pagePlay/index.vue";

const routes = [
  {
    path: "/",
    redirect: "/page-play/chooseComponents",
  },
  {
    path: "/page-play",
    name: "PagePlay",
    component: PagePlay,
    children: [
      {
        path: "chooseComponents",
        name: "chooseComponents",
        component: () =>
          import("../view/pagePlay/components/chooseComponents.vue"),
      },
      {
        path: "lazy-pic-getBoundingClientRect",
        name: "LazyPicGetBoundingClientRect",
        component: () =>
          import(
            "../view/pagePlay/components/lazy-pic-getBoundingClientRect.vue"
          ),
      },
      {
        path: "lazy-pic-IntersectionObserver",
        name: "IntersectionObserver",
        component: () =>
          import(
            "../view/pagePlay/components/lazy-pic-IntersectionObserver.vue"
          ),
      },
      {
        path: "cssLook",
        name: "cssLook",
        component: () => import("../view/pagePlay/components/cssLook.vue"),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
